前端React 18系统

共计 1904 个字符，预计需要花费 5 分钟才能阅读完成。

React 官网

新官网：https://zh-hans.react.dev/

编程环境

Node.js

Node.js 官网：https://nodejs.org/en

也可以使用淘宝 npm 镜像下载对应的 node 版本：https://npm.taobao.org/mirrors/node/

Linux Mint 环境

wget https://nodejs.org/dist/v18.17.1/node-v18.17.1-linux-x64.tar.xz
tar -xvf node-v18.17.1-linux-x64.tar.xz
mv node-v18.17.1-linux-x64 nodejs
sudo mv nodejs /usr/local/

接下来建立软链接，使得命令全局可用：

sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin
sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin

将 /usr/local/bin 路径添加到 PATH 环境变量中：

sudo chmod o+w /etc/profile
echo "export PATH=/usr/local/bin:$PATH" >> /etc/profile
sudo chmod o-w /etc/profile
reboot

重启系统后，查看 node 版本:node -v，查看 npm 版本：npm -v。

create-vite 脚手架

Vite 需要 Node.js 版本 14.18+，16+。

npm create vite@latest
√ Project name: ... react-study
√ Select a framework: » React
√ Select a variant: » JavaScript + SWC

SWC 是一个可扩展的基于 Rust 的平台，用于下一代快速开发工具，SWC 在单线程上比 Babel 快 20 倍，在四核上快 70 倍。

安装脚手架依赖：

cd react-study
npm i

启动脚手架：

npm run dev

ESLint 配置与 Prettier 配置

ESLint 是代码规范插件，而 Prettier 是代码格式化插件。

npm i vite-plugin-eslint

安装完进行相关的配置，在文件 vite.config.js 中引入 eslintPlugin：

import eslintPlugin from "vite-plugin-eslint"

export default defineConfig({
  plugins: [react(),
    eslintPlugin({include: ["src/*.jsx", "src/**/*.jsx"],
    }),
  ],
})

sass 预处理与 classnames 模块的使用

npm i sass
npm i classnames

JSX

是 JavaScript 语法扩展，可以在 JavaScript 文件中书写类似 HTML 的标签。

1. JSX 浏览器是不认识的，所以利用脚手架中的 SWC 或 Babel 进行编译，转换成浏览器能识别的代码
2. JSX and React 是相互独立的东西。但它们经常一起使用，可以单独使用它们中的任意一个，JSX 是一种语法扩展，而 React 则是一个 JavaScript 的库

JSX 语法与 HTML 的写法区别

对象和函数不能直接放到 JSX {} 中，另外，这些值也不会渲染：布尔值、空字符、null、undefined。

如何对不渲染的值进行输出：{JSON.stringify({age: 18}) }、{undefined + ”}

让样式支持驼峰写法，在文件 vite.config.js 中添加：

export default defineConfig({plugins: [],
  css: {
    modules: {localsConvention: 'camelCase',},
  },
})

组件

数据类型

通信的数据可以通过组件的 propTypes 属性，配合第三方模块 prop-types 进行类型限定。

prop-types 模块官网：https://github.com/facebook/prop-types

npm install --save prop-types

使用：

import PropTypes from 'prop-types'

function Welcome({count}) {return <div>hello Welcome, {count}</div>
}

Welcome.propTypes = {count: PropTypes.number,}

function App() {
  return (
    <div>
      hello App
      <Welcome count={123} />
    </div>
  )
}

export default App